<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div id="page-content">
    <div id="panel_sec_password" class="panel">
        <div class="panel-heading">
            <h3 class="panel-title">修改密码</h3>
        </div>

        <div class="wz-heading pad-top">

            <!--Nav-->
            <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
            <ul class="row wz-step wz-icon-bw wz-nav-off mar-top">
                <li class="col-xs-4">
                    <a data-toggle="tab" href="#sec_password-tab1">
                        <span class="text-danger"><i class="ti-unlock icon-2x"></i></span>
                        <p class="text-semibold mar-no">验证</p>
                    </a>
                </li>
                <li class="col-xs-4">
                    <a data-toggle="tab" href="#sec_password-tab2">
                        <span class="text-warning"><i class="ti-pencil icon-2x"></i></span>
                        <p class="text-semibold mar-no">修改密码</p>
                    </a>
                </li>
                <li class="col-xs-4">
                    <a data-toggle="tab" href="#sec_password-tab3">
                        <span class="text-success"><i class="ti-medall icon-2x"></i></span>
                        <p class="text-semibold mar-no">完成</p>
                    </a>
                </li>
            </ul>

        </div>

        <!--progress bar-->
        <div class="progress progress-xs">
            <div class="progress-bar progress-bar-primary"></div>
        </div>

        <div class="panel-body">

            <!--Form-->
            <form id="form_sec_password_input" class="form-horizontal" autocomplete="off">
                <input type="hidden" id="index" name="index">
                <div class="panel-body">
                    <div class="tab-content">

                        <!--First tab-->
                        <div id="sec_password-tab1" class="tab-pane">
                            <div class="form-group">
                                <label for="password" class="col-lg-3 control-label">当前密码</label>
                                <div class="col-lg-7">
                                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入当前密码">
                                </div>
                            </div>
                        </div>

                        <!--Second tab-->
                        <div id="sec_password-tab2" class="tab-pane fade">
                            <div class="form-group">
                                <label for="newPassword" class="col-lg-3 control-label">新密码</label>
                                <div class="col-lg-7">
                                    <input type="password" class="form-control" id="newPassword" name="newPassword" placeholder="请输入新密码">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="newPassword_2" class="col-lg-3 control-label">确认新密码</label>
                                <div class="col-lg-7">
                                    <input type="password" class="form-control" id="newPassword_2" name="newPassword_2" placeholder="再次输入新密码">
                                </div>
                            </div>
                        </div>

                        <!--Fourth tab-->
                        <div id="sec_password-tab3" class="tab-pane  mar-btm text-center">
                            <h4>修改密码成功</h4>
                        </div>

                    </div>
                </div>
            </form>

        </div>
        <div class="panel-footer text-right">
            <div class="box-inline">
                <button id="btn_next" type="button" class="btn btn-primary">下一步</button>
                <button id="btn_finish" type="button" class="btn btn-warning" disabled>完成</button>
            </div>
        </div>
    </div>

</div>

<script th:inline="javascript">

    $(function(){
        fn_password_input_validate();
        setTimeout(function(){
            $("#form_sec_password_input #password").val("");
        }, 300)
    });

    $('#panel_sec_password').bootstrapWizard({
        tabClass		    : 'wz-steps',
        nextSelector	    : '#btn_next',
        finishSelector      : '#btn_finish',
        onTabClick: function(tab, navigation, index) {
            return false;
        },
        onInit : function(){
            $('#panel_sec_password').find('#btn_finish').hide().prop('disabled', true);
        },
        onTabShow: function(tab, navigation, index) {
            var $total = navigation.find('li').length;
            var $current = index+1;
            var wdt = 100/$total;
            var lft = wdt*index;

            $('#panel_sec_password').find('.progress-bar').css({width:wdt+'%',left:lft+"%", 'position':'relative', 'transition':'all .5s'});

            // If it's the last tab then hide the last button and show the finish instead
            if($current >= $total) {
                $('#panel_sec_password').find('#btn_next').hide();
                $('#panel_sec_password').find('#btn_finish').show().prop('disabled', false);
            } else {
                $('#panel_sec_password').find('#btn_next').show();
                $('#panel_sec_password').find('#btn_finish').hide().prop('disabled', true);
            }
        },
        onNext: function(tab, navigation, index){
            if($('#form_sec_password_input').valid()) {
                // 设置当前 index
                $('#panel_sec_password').find('input#index').val(index);
                // 提交表单
                fn_sec_password_input_submit(index)
            }else{
                __toastr_error("请检查表单必填项");
            }

            return false;
        },
        onFinish: function () {
            window.location.href='index';
        }
    });

    function fn_password_input_validate(){
        __init_validate("form_sec_password_input", {
            ignore : ':not(:visible)',
            rules : {
                password : {
                    required : true
                },
                newPassword : {
                    required : true,
                    minlength : 8,
                    maxlength : 24
                },
                newPassword_2 : {
                    required : true,
                    equalTo : '#newPassword'
                }
            }
        });
    }

    function fn_sec_password_input_submit(index) {
        __form_save("form_sec_password_input", "/main/userCenter/updatePassword", function(data) {
            if(data.state === 1){
                $('#panel_sec_password').bootstrapWizard('show', index);
            }
        });
    }
</script>

</html>